<!DOCTYPE html>
<html>
<head>
  <title>主页</title>
  <link rel='stylesheet' href='/stylesheets/header.css' />
  <link rel='stylesheet' href='/stylesheets/footer.css' />
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="myApp">
<!--引入头部文件-->
<% include header.html %>
<section class="photos" ng-controller="photos">
  <lunbo></lunbo>
  <div class="me"><img class="myPhoto" ng-src="{{photo1.src}}"></div>
  <div class="motto"><span>摔倒了<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;爬起来就好。</span></div>
</section>
<section class="blog">
  <ul ng-controller="Article">
    <% articles.forEach(function(article){ %>
    <li>
      <div class="title"><%=article.title %></div>
      <div class="describe"><span style="color: #5196a8">简介：</span><%=article.describe %></div>
      <div class="bottom">
        <span class="createTime">创建时间：<%=article.creatTime %></span>
        <span class="updateTime">更新时间：<%=article.updateTime %></span>
        <span class="full_text"><a href="/full?article=<%=article._id %>">阅读全文</a></span>
      </div>

      <!--<div ng-include="'<%=article.content %>'" class="content"></div>-->
    </li>
    <% }) %>
  </ul>
</section>
<section class="photo">
</section>
<% include footer.html %>
<script type="text/javascript" src="/javascripts/angular.min.js"></script>
<script type="text/javascript" src="/javascripts/myApp.js"></script>
<script type="text/javascript" src="/javascripts/header.js"></script>
<script>

  /*首页照片*/
  app.controller('photos',function ($scope) {
    $scope.photo1={
      src:"/images/photo1.jpg"
    };
    $scope.photos=[
      {
        src:"/images/2.jpg"
      },
      {
        src:"/images/1.jpg"
      },{
        src:"/images/3.jpg"
      }
    ]
  });
  app.controller('Article',function ($scope,$http) {
    $scope.full=function (article) {
      alert(article);
      $http({
        url:"/full",
        data:article,
        method:"get"
      }).success(function(data, status, headers, config){
        alert('success')
      }).error(function(data, status, headers, config){
        alert("fail");
      })
    }
  });
  /*图片轮播*/
  app.directive('lunbo', function () {
    return {
      restrict: 'E',
      template: '<div class="lun"><img ng-repeat="img in photos" ng-src="{{img.src}}"><div class="circle"><i ng-repeat="img in photos" class="fa fa-circle" ng-click="showC($index)" ng-mouseover="showO($index)"></i></div></div>',
      replace: true,
      link: function (scope, element, attrs) {
        var step = 0;

        function show1(data) {
          for (var i = 0; i < element.find('img').length; i++) {
            if (i != data) {
              element.find('img')[i].style.display = "none";
              element.find('div').children('i')[i].style.color = "#777777";
            } else {
              element.find('img')[data].style.display = "block";
              element.find('div').children('i')[data].style.color = "red";
            }
          }
        }

        scope.showC = function (data) {
          step++;
          step = step % element.find('img').length;
          show1(data);
        };
        scope.showO = function (data) {

          show1(data);
        };
        setTimeout(function () {
          show1(step);
        }, 0);
        setInterval(function () {
          step++;
          step = step % element.find('img').length;
          show1(step);
        }, 2000);

      }
    }
  });
</script>
</body>
</html>
